<script setup>

import { ref,reactive,watch,watchPostEffect,computed } from 'vue'

const props = defineProps(['id','name','icon','taskFolderPath','openFileWindow']);

let FolderFormat = reactive({});
let currentFolder = ref({});
let path =  ref('/');

const pathHistory = [path.value];

const normalizedSize = computed(() => {
    let b = props.taskFolderPath;
    let arr = {};
    for(let i in props.taskFolderPath){
        let $dirs = props.taskFolderPath[i].split('/');
        
        let $b = arr;
        for(let key in  $dirs){
            if($dirs[key] != ''){
                if($dirs[key].indexOf('.') == -1){
                    if(!$b[$dirs[key]])$b[$dirs[key]] = {};
                    $b = $b[$dirs[key]]
                }else{
                    $b[$dirs[key]] = $dirs[key].split('.')[$dirs[key].split('.').length-1];
                }
            }
        }
    }
    FolderFormat = reactive(arr);
    currentFolder.value = FolderFormat
    arr = null;
    return b;
})


watch(path,(newValue)=>{
    pathHistory.push(newValue);
})


function AnalysisPath(){
    if( path.value == '/'){
        currentFolder.value = FolderFormat
        return false;
    }
    let $b = {};
    let pathValue = path.value.split('/');
    for(let key in pathValue){
        if(key != 0){
            if(!$b[pathValue[key]])$b[pathValue[key]] = FolderFormat[pathValue[key]]
            $b = $b[pathValue[key]]
        }
    }
    currentFolder.value = $b
}


function openFile(key){
    if(key.indexOf('.') == -1){
        path.value = path.value=='/'?path.value+key:path.value+'/'+key;
        this.AnalysisPath();    
    }else{
        props.openFileWindow(path.value=='/'?path.value+key:path.value+'/'+key)
    }
}

function GoPreviousPage(){
    if(pathHistory[pathHistory.length-1] && pathHistory.length>1){
        pathHistory.splice(pathHistory.length-1, 1)

        path.value = pathHistory[pathHistory.length-1]
        AnalysisPath();
        setTimeout(()=>{
            pathHistory.splice(pathHistory.length-1, 1)
        },1);
    }
    
}

</script>

<template>
    <div class="appWindow" :id="id" :title="name" :icon="icon">
        
        <div class="fileSystem" >
            <div class="pathWrap">
                <div v-show="false">{{normalizedSize}}</div>
                <div class="pathButton">
                    <div class="imgButton" @click="GoPreviousPage"><img src="@/assets/images/jiantou.svg" /></div>
                    <div class="imgButton imgButton2"><img src="@/assets/images/jiantou.svg"/></div>
                    <div class="imgButton imgButton3"><img src="@/assets/images/jiantou.svg"/></div>
                </div>
                <div class="pathText">
                    <input v-model="path"/>
                </div>
            </div>
            <div class="selectable">
                <template v-for="(item,key) in currentFolder">
                    <div class="files"  @click="openFile(key)">
                        <div :class="`img ${key.indexOf('.') != -1?'icon-unknown-file':'icon-folder'}`">
                            <div class="unknown-file-txt" v-if="key.indexOf('.') != -1">{{key.split('.')[key.split('.').length-1]}}</div>
                        </div>
                        <div class="name">{{key}}</div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
  
<style>
.files{ float: left; text-align: center; padding: 5px; margin: 5px;}
.files:hover{ background-color: rgba(0,174,255,0.2);}
.files .img{ width: 65px; height: 65px; margin: 5px ; background-size: contain; background-position: center; }
.files .name{ overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; width: 80px; margin: auto;}

.fileSystem{display:flex; flex-direction:column; align-items:stretch}
.fileSystem .files.ui-selecting  { background-color: rgba(0,174,255,0.4) }
.fileSystem .files.ui-selected { background-color: rgba(0,174,255,0.4) }

.fileSystem .selectable{ overflow: hidden;  flex: 1;}

.pathWrap{ height: 36px; padding: 8px; background-color: #fff; display:flex;  flex-direction:row;}
.pathButton{ width: 90px;  display:flex;  flex-direction:row;}
.pathWrap .imgButton{ flex: 1; position: relative;}
.pathWrap .pathButton img{ width: 14px; position:absolute; left: 50%; top: 50%; margin: -7px;}
.pathWrap .imgButton:hover{background-color: rgba(0,174,255,0.4) }
.pathWrap .imgButton2 img{ transform: rotate(180deg); opacity: 0.1;}
.pathWrap .imgButton3 img{ transform: rotate(90deg); opacity: 0.1;}

.pathText {flex:1; display:flex;}
.pathText input{ flex:1; border: 1px solid rgba(0,0,0,0.1); height: 34px; padding: 0px 10px; line-height: 34p;}
.pathText input:focus {   outline:none}
</style>
